<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>offset练习</title>
    <style>

        * {
            padding: 0;
            margin: 0;
            font-family: 'Arial', "Microsoft YaHei UI";
        }

        .box {
            width: 800px;
            height: 42px;
            margin: 100px auto;
            border: 1px solid #99CC33;
            position: relative;
        }

        .cloud {
            width: 83px;
            height: 42px;
            background: url("images/cloud.gif") no-repeat;
            position: absolute;
            top: 0;
            left: 0;
        }

        .box ul {
            position: relative;
            z-index: 1;
            list-style: none;
        }


        .box li {
            float: left;
            width: 83px;
            height: 42px;
            line-height: 42px;
            text-align: center;
            cursor: pointer;
            color: #88ba32;
        }

        .right {
            float: right;
            width: 32px;
            height: 32px;
            margin-top: 5px;
            background: url("images/rss.png") no-repeat;
        }
    </style>
</head>
<body>
<div class="box">
    <span class="cloud"></span>
    <ul>
        <li>首页新闻</li>
        <li>师资力量</li>
        <li>活动策划</li>
        <li>企业文化</li>
        <li>招聘信息</li>
        <li>公司简介</li>
        <li>上海校区</li>
        <li>广州校区</li>
    </ul>
    <span class="right"></span>
</div>
</body>
</html>
<script>
    var position = 0;
    var offsetLeft = 0;
    var timer = null;

    var cloud = document.getElementsByClassName("cloud")[0];
    var box = cloud.parentNode;
    var lis = document.getElementsByTagName("li");
    lis[0].style.color = "white";
    for (var i = 0; i < lis.length; i++) {
        lis[i].index = i;
        lis[i].onmouseover = function () {
            clearInterval(timer);
            for (var j = 0; j < lis.length; j++) {
                var obj = lis[j];
                obj.style.color = "#88ba32";
            }
            this.style.color = "white";
            var targetNum = this.offsetLeft;
            timer = setInterval(function () {
                offsetLeft = offsetLeft + (targetNum - offsetLeft) / 10;
                cloud.style.left = offsetLeft + "px";
            }, 10);
        }

        lis[i].onmouseout = function () {
            clearInterval(timer);
            for (var j = 0; j < lis.length; j++) {
                var obj = lis[j];
                obj.style.color = "#88ba32";
            }
            lis[position].style.color = "white";
            var targetNum = position * 83;
            timer = setInterval(function () {
                offsetLeft = offsetLeft + (targetNum - offsetLeft) / 10;
                cloud.style.left = offsetLeft + "px";
            },10);
        }

        lis[i].onclick = function () {
            position = this.index;
            offsetLeft = this.index * 83;
            cloud.style.left = offsetLeft + "px";
        }
    }
</script>